import { Component } from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import {StatusBar} from "@ionic-native/status-bar";

@IonicPage()
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

    videoWidget: any;
    video_url: string = 'http://video.castjp.top/158023.mp4';
    hor_size: number = 412;
    ver_size: number = 412;
    isHorizon: boolean = true;

    video_control: any = {
        play: 'play',
        full: 'expand',
        duration: 0,
        currentTime: 0,
        volume: 0,
        timer: null
    };

    constructor(public navCtrl: NavController, private statusBar: StatusBar) {
        if (this.isHorizon) {
            this.hor_size = screen.height;
            this.ver_size = screen.width;
            this.video_control.full = 'contract';
        } else {
            this.hor_size = screen.width;
            this.ver_size = screen.height;
            this.video_control.full = 'expand';
        }
    }

    ionViewDidLoad() {

    }

    ionViewWillEnter() {
        if (this.statusBar.isVisible) {
            this.statusBar.hide();
        }
        this.videoWidget = document.getElementById('lesson_video');
        this.videoWidget.controls = true;
    }

    ionViewDidEnter() {
        console.log('volume:', this.videoWidget.volume);
        console.log('duration:', this.videoWidget.duration);
        console.log('currentTime:', this.videoWidget.currentTime);

        this.video_control.volume = this.videoWidget.volume * 100;
        this.video_control.duration = this.videoWidget.duration;
        this.video_control.currentTime = this.videoWidget.currentTime;
    }

    ionViewDidLeave() {
        if (!this.statusBar.isVisible) {
            this.statusBar.show();
        }

        if (this.video_control.timer) {
            clearInterval(this.video_control.timer);
            this.video_control.timer = null;
        }
    }

    getBaseStyle(isHorScreen) {
        return {
            'ver-rotate': !isHorScreen,
            'hor-rotate': isHorScreen
        };
    }

    getPlayBarStyle() {
        return {
            'width': this.hor_size + 'px',
            'height': '40px',
            'position': 'absolute',
            'top': (this.ver_size - 100) + 'px'
        };
    }

    onRangeChanged(tag: number, event) {
        console.log('onRangeChanged:', event._value);
        switch (tag) {
            case 1:
                this.videoWidget.volume = event._value / 100;
                this.videoWidget.muted = false;
                break;

            case 2:
                this.videoWidget.currentTime = event._value;
                break;
        }
    }

    onChangeScreen() {
        this.isHorizon = !this.isHorizon;
        if (this.isHorizon) {
            this.hor_size = screen.height;
            this.ver_size = screen.width;
            this.video_control.full = 'contract';
        } else {
            this.hor_size = screen.width;
            this.ver_size = screen.height;
            this.video_control.full = 'expand';
        }
    }

    onVideoPlay() {
        if (this.videoWidget.paused) {
            this.videoWidget.play();
            this.video_control.play = 'pause';

            this.video_control.timer = setInterval(() => {
                this.video_control.currentTime = this.videoWidget.currentTime;
            }, 2000);
        } else {
            this.videoWidget.pause();
            this.video_control.play = 'play';

            if (this.video_control.timer) {
                clearInterval(this.video_control.timer);
                this.video_control.timer = null;
            }
        }
    }

    onVideoMute() {
        this.videoWidget.muted = !this.videoWidget.muted;
    }
}
